import './cnav.css'
import {NavLink} from 'react-router-dom'

import zhineng from '../../../../assets/images/zhineng.jpg'
import zhinengactive from '../../../../assets/images/zhineng-active.jpg'
import employment from '../../../../assets/images/employment.jpg'
import employmentactive from '../../../../assets/images/employment-active.jpg'
import security from '../../../../assets/images/security.jpg'
import securityactive from '../../../../assets/images/security-active.jpg'
import equipment from '../../../../assets/images/equipment.jpg'
import equipmentactive from '../../../../assets/images/equipment-active.jpg'
import { useEffect, useState } from 'react'


const Cnav=()=>{
    let [data,setdata]=useState([
        {
            id:1,
            icon:zhineng,
            jicon:zhinengactive,
            active:false,
            text:'智能检测',
            url:'/home'
        },
         {
            id:2,
            icon:employment,
            jicon:employmentactive,
            active:false,
             text:'就业态势',
             url:'/ee'
        },
         {
            id:3,
            icon:security,
            jicon:securityactive,
            active:false,
             text:'安防管理',
             url:'/ss'
        },
         {
            id:4,
            icon:equipment,
            jicon:equipmentactive,
            active:false,
            text:'设备运维',
            url:'/qq'
        }
    ])

    useEffect(()=>{
        // 路径 用window.localStorage的方式在router.js中找到路径名称（path:"/home"）
        let url=window.location.pathname
        console.log(url)
        // 在data中找到找到对应的url
        let list=data.find(item=>item.url===url)
        list.active=true
        setdata([...data])
    },[])
    return(
        <div className="nav-box" >
            <div className='nav-nav'>
                 {
                data.map((item)=>{
                    return(
                        <NavLink key={item.id} className='nav-img' to={item.url}>
                            <img src={item.active?item.jicon:item.icon} alt=''/>
                            <p>{item.text}</p>
                        </NavLink>
                    )
                })
            }
            </div>
           
        </div>
    )
}
export default Cnav;